<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>多租户管理系统</title>
    <link rel="stylesheet" href={% static 'layui-v2.2.6/layui/css/layui.css' %}>
    <link rel="stylesheet" href={% static 'css/bootstrap.css' %}/>
    <script type="text/javascript" src={% static 'layui-v2.2.6/layui/layui.js' %}></script>
    <script type="text/javascript" src={% static 'js/jquery-3.3.1.min.js' %}></script>
    <script type="text/javascript" src={% static 'js/echarts.js' %}></script>
</head>
<body>
<div class="layui-fluid">
    {% if count > 0 %}
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header">欢迎进入</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">我的资源</blockquote>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-data="{url:'/ajaxToGetTenantInfo',id:'tenantInfo'}"
                           lay-filter="tenant">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id', minwidth:120}">租户名</th>
                            <th lay-data="{field:'label',event: 'getlabel', minwidth:150}">配置</th>
                            <th lay-data="{field:'create_at', minwidth:80}">创建时间</th>
                            <th lay-data="{field:'create_at', minwidth:130}">过期时间</th>
                            <th lay-data="{field:'status', minwidth:110}">状态</th>
                            <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="start">启动</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="stop">关闭</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="manage">管理</a>
                    </script>
                </div>
            </div>

        </div>

     {% endif %}
        <div class="layui-col-md12">
            <div class="layui-card" id="welcomecheck">
                <div class="layui-card-header">欢迎进入</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">你貌似还没有申请租户哦！</blockquote>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">您可以有如下租户规格可选：</div>
                <table class="layui-table" lay-data="{url:'/static/resource.json',id:'idTest'}"
                       lay-filter="resource">
                    <thead>
                    <tr>
                        <th lay-data="{field:'hadoopVersion', width:120}">hadoop版本</th>
                        <th lay-data="{field:'nodeCount', minwidth:150}">从节点个数</th>
                        <th lay-data="{field:'CPU', minwidth:80}">CPU</th>
                        <th lay-data="{field:'memory', minwidth:130}">内存</th>
                        <th lay-data="{field:'storage', minwidth:110}">磁盘空间</th>
                        <th lay-data="{field:'price', minwidth:160}">价格</th>
                        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#puy'}">操作</th>
                    </tr>
                    </thead>
                </table>
                <script type="text/html" id="puy">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">购买</a>
                </script>
            </div>
        </div>

</div>
</body>


<script>
    {% if count > 0 %}
    document.getElementById("welcomecheck").style.display="none";
    {% endif %}
    layui.use('table', function () {
        var table = layui.table;
        //监听工具条
        table.on('tool(resource)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    title: "购买详情",
                    content: "是否要立即购买?",
                    btn: ['立即购买', '残忍拒绝']
                    , yes: function (index, layero) {
                        var loadindex = layer.load(1); //换了种风格
                        //按钮【按钮一】的回调
                        $.ajax({
                            url: '/puyTenant/',
                            type: 'GET',
                            data: {
                                "label": data.label,
                                "nodeCount": data.nodeCount,
                                "memory":data.memory
                            },
                            success: function (data) {
                                console.log("failed")
                                if (data == "购买成功")
                                    layer.msg(data, {icon: 6}, {time: 500});
                                    layer.close(loadindex);
                                setTimeout("window.location.reload()",2000);
                            }
                        });
                        {#    购买成功，刷新界面#}
                        {#    window.location.reload();#}
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            }
        });

        //监听工具条
        table.on('tool(tenant)', function (obj) {
            var data = obj.data;
            if (obj.event === 'start') {
                layer.open({
                    title: "启动集群",
                    content: "确认启动",
                    btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        {#layer.msg('hello')#}
                        var loadindex = layer.load(1); //换了种风格
                        $.ajax({
                            url: '/startHadoop?id=' + data.id,
                            type: 'GET',
                            /*data: {
                                 "label": data.label,
                                 "nodeCount":data.nodeCount
                            },*/
                            success: function (data) {
                                console.log(data)
                                if (data == "开启成功") {
                                    layer.msg(data, {icon: 6}, {time: 500});
                                    layer.close(loadindex)
                                    setTimeout("window.location.reload()",2000)
                                }
                            }
                        });

                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            } else if (obj.event === 'stop') {
                layer.open({
                    title: "关闭集群",
                    content: "确认关闭",
                    btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        var loadindex = layer.load(1); //换了种风格
                        $.ajax({
                            url: '/stopHadoop?id=' + data.id,
                            type: 'GET',
                            success: function (data) {
                                console.log(data)
                                if (data == "关闭成功") {
                                    layer.msg(data, {icon: 6}, {time: 500});
                                    layer.close(loadindex)
                                    setTimeout("window.location.reload()", 2000)
                                }
                            }
                        });
                    }
                });
            } else if (obj.event === 'manage') {
                self.location = '/tenantManage?id=' + data.id;
            } else if (obj.event === 'getlabel') {
                $.getJSON("/static/resource.json", function (data1) {
                    var strHtml = "";

                    $.each(data1.data, function (infoIndex, info) {
                        if (data.label == info.label) {

                            strHtml += "hadoopVersion ：" + info.hadoopVersion + "<br/>";
                            strHtml += "nodeCount ：" + info.nodeCount + "<br/>";
                            strHtml += "CPU ：" + info.CPU + "<br/>";
                            strHtml += "memory ：" + info.memory + "<br/>";
                            strHtml += "storage ：" + info.storage + "<br/>";
                            strHtml += "price ：" + info.price + "<br/>";
                        }
                    });
                    //显示处理后的数据
                    layer.open({

                        title: "租户详情",
                        content: strHtml
                    });
                });
            }
        });
    });
</script>
</html>
